<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>HTMLReg</title>
		<script src="../CSSReg/CSSReg.js" type="text/javascript"></script>
		<script src="HTMLReg.js" type="text/javascript"></script>	
		<!--[if IE]>
		<style type="text/css">
		* { 
			behavior: url(staticHTML.htc); 
			-ms-behavior: url(staticHTML.htc);
		}
		</style>
		<![endif]-->	
		<style type="text/css">
			body {
				font: 62.5%/1.3em "Lucida Grande", verdana, arial, helvetica, sans-serif;
			}	
			#input, #output, #parseTree, #rawOutput {
				width:340px;
				height:200px;
				
			}
			.row {
				display:block;
				width:700px;
			}
			.col {
				width:350px;
				float:left;
			}
			#htmlOutput {
				position: relative;
				width:500px;
				height:300px;
				overflow:hidden;
				border:1px solid #ccc;	
			}
		</style>
		<style type="text/css"></style>
		<script type="text/javascript">
			function convert() {
				var start = new Date();
				HTMLReg.setAppID('myApplication');							
				HTMLReg.setDebugObjs({
					'parseTree':function(parseTree) {
						document.getElementById('parseTree').value = parseTree;
					},
					'rawOutput':function(rawOuput) {
						document.getElementById('rawOutput').value = rawOuput;
					}
				});
				document.getElementById('parseTree').value='';
				var output = HTMLReg.parse(document.getElementById('input').value);				
				document.getElementById('htmlOutput').innerHTML = output;				
				document.getElementById('output').value = output;
				var end = new Date();
				var elapsedTime = (end - start);
				document.getElementById('convertTime').innerHTML = 'Elapsed time:'+ elapsedTime+'ms';
			}
			function clearData() {
				document.getElementById('htmlOutput').innerHTML='';
				document.getElementById('rawOutput').value='';
				document.getElementById('parseTree').value='';
				document.getElementById('input').value='';
				document.getElementById('output').value='';				
			}
			function hackTest() {
				document.getElementById('input').value='<table><tr><td>Not a hack</td></tr></table><img src=javascript:alert(1)><script><iframe><b>I am bold</b><a href="javascript&#58;alert(1)">hack</a><table background="javascript:alert(1)//"><img src= alt=" onerror=alert(1)//"><img class="& #09;myclass& #09;">';
				convert();
			}			
		</script>
	</head>
	<body>
		<img src="images/logo.gif" />
		<fieldset>
			<div class="row">
				<span class="col">
					Input:<br>
					<textarea id="input"><div style="background-image: url('http://red/x?y=1\\);x:x;z:');">xxx</div></textarea>
				</span>
				<span class="col">
				Output:<br>
				<textarea id="output"></textarea>
				<br>
					<input type="button" value="Clear" onclick="clearData();" /> <input type="button" value="Hack test" onclick="hackTest();" /><input type="button" value="Convert" onclick="convert();" /> <span id="convertTime"></span>				
				</span>				
			</div>
			<div class="row">
				<span class="col">			
						Parse tree:<br>
						<textarea id="parseTree"></textarea>				
				</span>
				<span class="col">					
						Raw untreated output:<br>
						<textarea id="rawOutput"></textarea>					
				</span>
			</div>
		</fieldset>
		
		<h1>HTML Output</h1>
		<div id="htmlOutput"></div>
		
	</body>
</html>
